import { defineComponent } from "vue";
import style from "./index.module.less";
import DemoPage from "@/components/DemoPage";
import LineChart from "@/components/LineChart";
import { lineChartData } from "@/components/LineChart/types";
export default defineComponent({
  name: "",
  setup() {
    const render1 = () => {
      const data: lineChartData[] = [
        {
          name: "申请数",
          data: [1, 3, 4, 6, 10, 60, 222, 5, 2, 66, 112, 676].reverse(),
          color: "#4485FF",
          areaColor: ["#4485FF", "rgba(255,255,255,0)"],
        },
        {
          name: "受理数",
          data: [1, 3, 4, 6, 10, 60, 222, 5, 2, 66, 112, 676],
          color: "#28C9BF",
          areaColor: ["#28C9BF", "rgba(255,255,255,0)"],
        },
      ];
      const options = {
        xAxis: {
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
          ],
        },
      };
      return <LineChart data={data} options={options} class="!w-[335px]" />;
    };
    return () => {
      const data = [
        {
          name: "折线图表",
          view: render1,
        },
      ];
      return <DemoPage data={data} />;
    };
  },
});
